<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环境数据助手 - 原型设计</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入FontAwesome图标 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- 引入Echarts图表库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary-color: #1890ff;
            --secondary-color: #52c41a;
            --dark-color: #001529;
            --light-color: #f0f2f5;
            --danger-color: #ff4d4f;
            --warning-color: #faad14;
            --border-radius: 4px;
            --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        
        body {
            font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
            background-color: #f5f5f5;
            color: #333;
            overflow-x: hidden;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 240px;
            background-color: var(--dark-color);
            color: white;
            padding-top: 60px;
            z-index: 100;
            transition: all 0.3s;
        }
        
        .sidebar .nav-link {
            color: rgba(255, 255, 255, 0.65);
            padding: 12px 20px;
            border-radius: 0;
            display: flex;
            align-items: center;
            transition: all 0.3s;
        }
        
        .sidebar .nav-link:hover, .sidebar .nav-link.active {
            color: white;
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .sidebar .nav-link i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        .sidebar .logo {
            position: absolute;
            top: 0;
            left: 0;
            height: 60px;
            width: 100%;
            display: flex;
            align-items: center;
            padding-left: 20px;
            background-color: rgba(0, 0, 0, 0.2);
            color: white;
            font-size: 18px;
            font-weight: bold;
        }
        
        .sidebar .logo i {
            font-size: 24px;
            margin-right: 10px;
            color: var(--primary-color);
        }
        
        /* 主内容区域样式 */
        .main-content {
            margin-left: 240px;
            padding: 70px 20px 20px;
            min-height: 100vh;
        }
        
        /* 顶部导航栏样式 */
        .top-navbar {
            position: fixed;
            top: 0;
            left: 240px;
            right: 0;
            height: 60px;
            background-color: white;
            box-shadow: var(--box-shadow);
            z-index: 99;
            display: flex;
            align-items: center;
            padding: 0 20px;
            justify-content: space-between;
        }
        
        .breadcrumb-container {
            display: flex;
            align-items: center;
        }
        
        .user-dropdown {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .user-dropdown .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
        }
        
        /* 卡片样式 */
        .custom-card {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .custom-card .card-header {
            padding: 12px 16px;
            border-bottom: 1px solid #f0f0f0;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .custom-card .card-body {
            padding: 16px;
        }
        
        /* 数据概览卡片 */
        .stat-card {
            padding: 20px;
            border-radius: var(--border-radius);
            background-color: white;
            box-shadow: var(--box-shadow);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        
        .stat-card .icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            font-size: 20px;
        }
        
        .stat-card .info h4 {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .stat-card .info .value {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 0;
        }
        
        .stat-card .info .change {
            font-size: 12px;
            display: flex;
            align-items: center;
            margin-top: 4px;
        }
        
        .stat-card .info .change.up {
            color: var(--secondary-color);
        }
        
        .stat-card .info .change.down {
            color: var(--danger-color);
        }
        
        /* 图表容器 */
        .chart-container {
            width: 100%;
            height: 350px;
            min-height: 250px;
            margin-bottom: 10px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        /* 表格样式 */
        .custom-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .custom-table th, .custom-table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .custom-table th {
            background-color: #fafafa;
            color: #666;
            font-weight: 500;
        }
        
        .custom-table tr:hover {
            background-color: #f5f5f5;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            font-weight: 500;
            margin-bottom: 8px;
            display: block;
        }
        
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: var(--border-radius);
            transition: all 0.3s;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            outline: none;
        }
        
        /* 按钮样式 */
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover, .btn-primary:focus {
            background-color: #40a9ff;
            border-color: #40a9ff;
        }
        
        .btn-success {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        
        .btn-success:hover, .btn-success:focus {
            background-color: #73d13d;
            border-color: #73d13d;
        }
        
        /* 标签页样式 */
        .custom-tabs {
            margin-bottom: 20px;
            display: flex;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .custom-tabs .tab {
            padding: 12px 16px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-right: 20px;
            transition: all 0.3s;
        }
        
        .custom-tabs .tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }
        
        /* 原型导航样式 */
        .prototype-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: white;
            z-index: 1000;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .prototype-nav h1 {
            font-size: 18px;
            margin: 0;
        }
        
        .prototype-nav select {
            padding: 6px 12px;
            border-radius: var(--border-radius);
            background-color: #555;
            color: white;
            border: none;
        }
        
        .prototype-frames-container {
            padding-top: 60px;
            display: block;
            width: 100%;
        }
        
        .prototype-frame {
            margin: 20px;
            width: calc(100% - 40px);
            min-height: calc(100vh - 80px);
            border: 2px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
            transition: all 0.3s;
            display: none;
            position: relative;
        }
        
        .prototype-frame.active {
            display: block;
        }
        
        .bad-sensor-icon {
            color: var(--danger-color);
        }
        
        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            margin-left: 8px;
        }
        
        .status-badge-success {
            background-color: rgba(82, 196, 26, 0.1);
            color: var(--secondary-color);
            border: 1px solid rgba(82, 196, 26, 0.2);
        }
        
        .status-badge-danger {
            background-color: rgba(255, 77, 79, 0.1);
            color: var(--danger-color);
            border: 1px solid rgba(255, 77, 79, 0.2);
        }
        
        .status-badge-warning {
            background-color: rgba(250, 173, 20, 0.1);
            color: var(--warning-color);
            border: 1px solid rgba(250, 173, 20, 0.2);
        }
        
        .station-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .station-card {
            width: calc(33.33% - 20px);
            min-width: 300px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
            transition: all 0.3s;
        }
        
        .station-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }
        
        .station-card .station-header {
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .station-card .station-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 500;
        }
        
        .station-card .station-body {
            padding: 16px;
        }
        
        .station-card .station-info {
            display: flex;
            margin-bottom: 16px;
        }
        
        .station-card .station-info-item {
            flex: 1;
        }
        
        .station-card .station-info-item h4 {
            font-size: 12px;
            color: #666;
            margin-bottom: 4px;
        }
        
        .station-card .station-info-item p {
            font-size: 14px;
            margin: 0;
        }
        
        .station-card .sensor-list {
            border-top: 1px solid #f0f0f0;
            padding-top: 16px;
        }
        
        .station-card .sensor-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0;
        }
        
        .station-card .sensor-item .sensor-name {
            display: flex;
            align-items: center;
        }
        
        .station-card .sensor-item .sensor-name i {
            margin-right: 8px;
            width: 16px;
        }
        
        /* 进度条样式 */
        .progress {
            height: 8px;
            margin-top: 8px;
            margin-bottom: 4px;
        }
        
        /* 切换视图按钮 */
        .view-toggle {
            display: flex;
            margin-bottom: 20px;
        }
        
        .view-toggle .btn {
            padding: 6px 12px;
            background-color: #f0f0f0;
            border: 1px solid #d9d9d9;
            color: #666;
        }
        
        .view-toggle .btn:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        
        .view-toggle .btn:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: none;
        }
        
        .view-toggle .btn.active {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }
        
        /* 响应式布局 */
        @media (max-width: 992px) {
            .sidebar {
                width: 80px;
                padding-top: 60px;
            }
            
            .sidebar .nav-link span {
                display: none;
            }
            
            .sidebar .nav-link i {
                margin-right: 0;
                font-size: 18px;
            }
            
            .sidebar .logo span {
                display: none;
            }
            
            .main-content {
                margin-left: 80px;
            }
            
            .top-navbar {
                left: 80px;
            }
        }
        
        /* 分析模块样式 */
        .analysis-card {
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .analysis-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
        
        .analysis-card .card-img {
            height: 160px;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: var(--primary-color);
        }
        
        /* 数据标定样式 */
        .calibration-form {
            background-color: white;
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--box-shadow);
        }
        
        .calibration-result {
            margin-top: 20px;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: var(--border-radius);
        }
        
        .calibration-chart {
            width: 100%;
            height: 300px;
        }
        
        .model-info-item {
            margin-bottom: 10px;
        }
        
        .model-info-item .label {
            font-weight: 500;
            margin-right: 10px;
        }
        
        /* 数据点样式 */
        .data-point {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
        }
        
        .ui-prototype-title {
            margin: 20px 0;
            font-weight: bold;
            text-align: center;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }
        
        /* 特定图表的高度调整 */
        #trendComparisonChart, #forecastChart, #anomalyDetectionChart {
            height: 400px;
        }
        
        #correlationScatterChart, #calibrationChart, #validationChart {
            height: 350px;
        }
    </style>
</head>
<body>
    <!-- 原型导航 -->
    <div class="prototype-nav">
        <h1>环境数据助手 - 原型设计</h1>
        <select id="prototypeSelect" class="form-select">
            <option value="dashboard">首页/仪表盘</option>
            <option value="raw-data">原始数据查看</option>
            <option value="statistics">统计数据查看</option>
            <option value="correlation">数据分析-相关性分析</option>
            <option value="trend">数据分析-趋势对比分析</option>
            <option value="forecast">数据分析-预测分析</option>
            <option value="anomaly">数据分析-异常检测分析</option>
            <option value="calibration">数据标定</option>
        </select>
    </div>
    
    <!-- 原型页面容器 -->
    <div class="prototype-frames-container">
        <!-- 原型内容将在这里动态加载 -->
    </div>

    <!-- Bootstrap JS 和依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        // 等文档加载完成后再初始化原型
        document.addEventListener('DOMContentLoaded', function() {
            // 创建所有原型框架
            createDashboardPrototype();
            createRawDataPrototype();
            createStatisticsPrototype();
            createCorrelationAnalysisPrototype();
            createTrendAnalysisPrototype();
            createForecastAnalysisPrototype();
            createAnomalyAnalysisPrototype();
            createCalibrationPrototype();
            
            // 初始化所有图表
            initializeCharts();
            
            // 默认显示原始数据页面
            showPrototypeFrame('raw-data');
            
            // 为原型选择器添加事件监听
            document.getElementById('prototypeSelect').addEventListener('change', function(e) {
                showPrototypeFrame(e.target.value);
            });
        });
        
        // 显示指定的原型框架
        function showPrototypeFrame(frameId) {
            console.log("显示框架:", frameId);
            // 隐藏所有框架
            document.querySelectorAll('.prototype-frame').forEach(frame => {
                frame.style.display = 'none';
            });
            
            // 显示选定的框架
            const selectedFrame = document.getElementById('prototype-' + frameId);
            if (selectedFrame) {
                selectedFrame.style.display = 'block';
                // 更新选择器的值
                document.getElementById('prototypeSelect').value = frameId;
            } else {
                console.error('找不到框架: prototype-' + frameId);
            }
        }
        
        // 初始化所有原型
        function initializePrototypes() {
            createDashboardPrototype();
            createRawDataPrototype();
            createStatisticsPrototype();
            createCorrelationAnalysisPrototype();
            createTrendAnalysisPrototype();
            createForecastAnalysisPrototype();
            createAnomalyAnalysisPrototype();
            createCalibrationPrototype();
            
            // 初始化所有图表
            initializeCharts();
        }
        
        // 创建仪表盘原型
        function createDashboardPrototype() {
            const container = document.querySelector('.prototype-frames-container');
            const frame = document.createElement('div');
            frame.id = 'prototype-dashboard';
            frame.className = 'prototype-frame';
            
            frame.innerHTML = `
                <!-- 应用布局 -->
                <div class="sidebar">
                    <div class="logo">
                        <i class="fas fa-leaf"></i>
                        <span>环境数据助手</span>
                    </div>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <i class="fas fa-tachometer-alt"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-database"></i>
                                <span>原始数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-bar"></i>
                                <span>统计数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-line"></i>
                                <span>数据分析</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-sliders-h"></i>
                                <span>数据标定</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-cog"></i>
                                <span>系统设置</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="top-navbar">
                    <div class="breadcrumb-container">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">首页</a></li>
                                <li class="breadcrumb-item active" aria-current="page">仪表盘</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="user-dropdown">
                        <div class="avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <span>管理员</span>
                        <i class="fas fa-chevron-down ms-2"></i>
                    </div>
                </div>
                
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="row mb-4">
                            <div class="col-12">
                                <h2 class="mb-4">环境监测概览</h2>
                            </div>
                            <div class="col-md-3">
                                <div class="stat-card">
                                    <div class="icon" style="background-color: rgba(24, 144, 255, 0.1); color: var(--primary-color);">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </div>
                                    <div class="info">
                                        <h4>监测站点</h4>
                                        <p class="value">18</p>
                                        <p class="change up">
                                            <i class="fas fa-arrow-up me-1"></i>
                                            <span>新增 2 个站点</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="stat-card">
                                    <div class="icon" style="background-color: rgba(82, 196, 26, 0.1); color: var(--secondary-color);">
                                        <i class="fas fa-microchip"></i>
                                    </div>
                                    <div class="info">
                                        <h4>传感器数量</h4>
                                        <p class="value">126</p>
                                        <p class="change up">
                                            <i class="fas fa-arrow-up me-1"></i>
                                            <span>新增 5 个传感器</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="stat-card">
                                    <div class="icon" style="background-color: rgba(250, 173, 20, 0.1); color: var(--warning-color);">
                                        <i class="fas fa-exclamation-triangle"></i>
                                    </div>
                                    <div class="info">
                                        <h4>异常数据</h4>
                                        <p class="value">7</p>
                                        <p class="change down">
                                            <i class="fas fa-arrow-down me-1"></i>
                                            <span>减少 3 个异常</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="stat-card">
                                    <div class="icon" style="background-color: rgba(255, 77, 79, 0.1); color: var(--danger-color);">
                                        <i class="fas fa-tools"></i>
                                    </div>
                                    <div class="info">
                                        <h4>待维护设备</h4>
                                        <p class="value">4</p>
                                        <p class="change up">
                                            <i class="fas fa-arrow-up me-1"></i>
                                            <span>新增 1 个设备</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-lg-8">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>关键指标趋势</span>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button">
                                                最近7天
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="trendChart" class="chart-container"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>站点状态</span>
                                        <a href="#" class="text-primary">查看全部</a>
                                    </div>
                                    <div class="card-body">
                                        <div class="station-status-item d-flex justify-content-between align-items-center mb-3">
                                            <div>
                                                <i class="fas fa-map-marker-alt me-2 text-primary"></i>
                                                <span>西湖监测站</span>
                                                <span class="status-badge status-badge-success">在线</span>
                                            </div>
                                            <span>26 个传感器</span>
                                        </div>
                                        <div class="station-status-item d-flex justify-content-between align-items-center mb-3">
                                            <div>
                                                <i class="fas fa-map-marker-alt me-2 text-primary"></i>
                                                <span>钱塘江站</span>
                                                <span class="status-badge status-badge-success">在线</span>
                                            </div>
                                            <span>18 个传感器</span>
                                        </div>
                                        <div class="station-status-item d-flex justify-content-between align-items-center mb-3">
                                            <div>
                                                <i class="fas fa-map-marker-alt me-2 text-primary"></i>
                                                <span>千岛湖站</span>
                                                <span class="status-badge status-badge-warning">部分在线</span>
                                            </div>
                                            <span>24 个传感器</span>
                                        </div>
                                        <div class="station-status-item d-flex justify-content-between align-items-center mb-3">
                                            <div>
                                                <i class="fas fa-map-marker-alt me-2 text-primary"></i>
                                                <span>富春江站</span>
                                                <span class="status-badge status-badge-danger">离线</span>
                                            </div>
                                            <span>19 个传感器</span>
                                        </div>
                                        <div class="station-status-item d-flex justify-content-between align-items-center">
                                            <div>
                                                <i class="fas fa-map-marker-alt me-2 text-primary"></i>
                                                <span>太湖站</span>
                                                <span class="status-badge status-badge-success">在线</span>
                                            </div>
                                            <span>22 个传感器</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>最近数据异常</span>
                                        <a href="#" class="text-primary">查看全部</a>
                                    </div>
                                    <div class="card-body">
                                        <div class="alert alert-danger mb-3" role="alert">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-exclamation-circle me-2"></i>
                                                <strong>温度传感器异常</strong>
                                            </div>
                                            <div class="mt-2 small">
                                                <p class="mb-1">西湖监测站 - 传感器ID: TEMP-001</p>
                                                <p class="mb-1">检测时间: 2023-10-15 09:23:45</p>
                                                <p class="mb-0">异常值: 41.2°C (超出正常范围)</p>
                                            </div>
                                        </div>
                                        <div class="alert alert-warning mb-3" role="alert">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-exclamation-triangle me-2"></i>
                                                <strong>湿度数据波动</strong>
                                            </div>
                                            <div class="mt-2 small">
                                                <p class="mb-1">千岛湖站 - 传感器ID: HUM-003</p>
                                                <p class="mb-1">检测时间: 2023-10-15 07:45:12</p>
                                                <p class="mb-0">异常值: 波动超过30%</p>
                                            </div>
                                        </div>
                                        <div class="alert alert-warning mb-0" role="alert">
                                            <div class="d-flex align-items-center">
                                                <i class="fas fa-exclamation-triangle me-2"></i>
                                                <strong>VOC数据突增</strong>
                                            </div>
                                            <div class="mt-2 small">
                                                <p class="mb-1">钱塘江站 - 传感器ID: VOC-002</p>
                                                <p class="mb-1">检测时间: 2023-10-14 22:12:33</p>
                                                <p class="mb-0">异常值: 突增至200ppm</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>监测数据分布</span>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button">
                                                所有类型
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="dataDistributionChart" class="chart-container"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>传感器状态</span>
                                        <a href="#" class="text-primary">查看详情</a>
                                    </div>
                                    <div class="card-body">
                                        <div id="sensorStatusChart" class="chart-container"></div>
                                        <div class="mt-3">
                                            <div class="d-flex justify-content-between mb-2">
                                                <span>在线传感器</span>
                                                <span>114 / 126</span>
                                            </div>
                                            <div class="progress mb-3">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: 90.5%" aria-valuenow="90.5" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="d-flex justify-content-between mb-2">
                                                <span>离线传感器</span>
                                                <span>8 / 126</span>
                                            </div>
                                            <div class="progress mb-3">
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 6.3%" aria-valuenow="6.3" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <div class="d-flex justify-content-between mb-2">
                                                <span>故障传感器</span>
                                                <span>4 / 126</span>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar bg-warning" role="progressbar" style="width: 3.2%" aria-valuenow="3.2" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>最近活动日志</span>
                                        <button class="btn btn-sm btn-outline-primary">导出日志</button>
                                    </div>
                                    <div class="card-body">
                                        <table class="custom-table">
                                            <thead>
                                                <tr>
                                                    <th>时间</th>
                                                    <th>用户</th>
                                                    <th>活动</th>
                                                    <th>详情</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>2023-10-15 10:23:45</td>
                                                    <td>张工程师</td>
                                                    <td>传感器标定</td>
                                                    <td>为西湖监测站的温度传感器(TEMP-001)完成标定</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-15 09:45:21</td>
                                                    <td>李管理员</td>
                                                    <td>数据导出</td>
                                                    <td>导出钱塘江站10月份的全部监测数据</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-15 08:37:09</td>
                                                    <td>王分析师</td>
                                                    <td>数据分析</td>
                                                    <td>进行温度与湿度的相关性分析</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-14 16:42:33</td>
                                                    <td>赵技术员</td>
                                                    <td>设备维护</td>
                                                    <td>替换富春江站的故障传感器VOC-005</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-14 14:15:27</td>
                                                    <td>系统</td>
                                                    <td>异常警报</td>
                                                    <td>千岛湖站检测到异常温度波动，已发送通知</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(frame);
        }
        
        // 创建原始数据查看原型
        function createRawDataPrototype() {
            const container = document.querySelector('.prototype-frames-container');
            const frame = document.createElement('div');
            frame.id = 'prototype-raw-data';
            frame.className = 'prototype-frame';
            
            frame.innerHTML = `
                <!-- 应用布局 -->
                <div class="sidebar">
                    <div class="logo">
                        <i class="fas fa-leaf"></i>
                        <span>环境数据助手</span>
                    </div>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-tachometer-alt"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <i class="fas fa-database"></i>
                                <span>原始数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-bar"></i>
                                <span>统计数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-line"></i>
                                <span>数据分析</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-sliders-h"></i>
                                <span>数据标定</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-cog"></i>
                                <span>系统设置</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="top-navbar">
                    <div class="breadcrumb-container">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">首页</a></li>
                                <li class="breadcrumb-item active" aria-current="page">原始数据查看</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="user-dropdown">
                        <div class="avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <span>管理员</span>
                        <i class="fas fa-chevron-down ms-2"></i>
                    </div>
                </div>
                
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="row mb-4">
                            <div class="col-12">
                                <h2 class="mb-4">原始数据查看</h2>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>数据筛选</span>
                                        <button class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-filter me-1"></i>
                                            高级筛选
                                        </button>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3 mb-3">
                                                <div class="form-group">
                                                    <label for="siteSelect" class="form-label">监测站点</label>
                                                    <select id="siteSelect" class="form-control">
                                                        <option value="">请选择监测站点</option>
                                                        <option value="site1">西湖监测站</option>
                                                        <option value="site2">钱塘江站</option>
                                                        <option value="site3">千岛湖站</option>
                                                        <option value="site4">富春江站</option>
                                                        <option value="site5">太湖站</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="form-group">
                                                    <label for="sensorSelect" class="form-label">传感器</label>
                                                    <select id="sensorSelect" class="form-control">
                                                        <option value="">请选择传感器</option>
                                                        <option value="temp001">温度传感器 (TEMP-001)</option>
                                                        <option value="hum003">湿度传感器 (HUM-003)</option>
                                                        <option value="voc002">VOC传感器 (VOC-002)</option>
                                                        <option value="pm001">PM2.5传感器 (PM-001)</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="form-group">
                                                    <label for="dataTypeSelect" class="form-label">数据类型</label>
                                                    <select id="dataTypeSelect" class="form-control">
                                                        <option value="">请选择数据类型</option>
                                                        <option value="temp">温度 (°C)</option>
                                                        <option value="hum">湿度 (%)</option>
                                                        <option value="voc">VOC (ppm)</option>
                                                        <option value="pm25">PM2.5 (μg/m³)</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="form-group">
                                                    <label for="timeRange" class="form-label">时间范围</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="开始时间" value="2023-10-01">
                                                        <span class="input-group-text">至</span>
                                                        <input type="text" class="form-control" placeholder="结束时间" value="2023-10-15">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 text-end">
                                                <button class="btn btn-outline-secondary me-2">
                                                    <i class="fas fa-redo-alt me-1"></i>
                                                    重置
                                                </button>
                                                <button class="btn btn-primary">
                                                    <i class="fas fa-search me-1"></i>
                                                    查询
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="view-toggle">
                                    <button class="btn active">
                                        <i class="fas fa-table me-1"></i>
                                        表格视图
                                    </button>
                                    <button class="btn">
                                        <i class="fas fa-chart-line me-1"></i>
                                        图表视图
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6 text-end">
                                <button class="btn btn-outline-primary me-2">
                                    <i class="fas fa-file-csv me-1"></i>
                                    导出 CSV
                                </button>
                                <button class="btn btn-outline-success me-2">
                                    <i class="fas fa-file-excel me-1"></i>
                                    导出 Excel
                                </button>
                                <button class="btn btn-outline-info">
                                    <i class="fas fa-file-image me-1"></i>
                                    导出图表
                                </button>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>数据列表</span>
                                        <span class="text-muted">共找到 326 条记录</span>
                                    </div>
                                    <div class="card-body">
                                        <table class="custom-table">
                                            <thead>
                                                <tr>
                                                    <th>序号</th>
                                                    <th>时间</th>
                                                    <th>站点</th>
                                                    <th>传感器</th>
                                                    <th>数据类型</th>
                                                    <th>监测值</th>
                                                    <th>单位</th>
                                                    <th>数据质量</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>2023-10-15 10:00:00</td>
                                                    <td>西湖监测站</td>
                                                    <td>TEMP-001</td>
                                                    <td>温度</td>
                                                    <td>23.5</td>
                                                    <td>°C</td>
                                                    <td><span class="badge bg-success">优</span></td>
                                                </tr>
                                                <tr>
                                                    <td>2</td>
                                                    <td>2023-10-15 09:45:00</td>
                                                    <td>西湖监测站</td>
                                                    <td>TEMP-001</td>
                                                    <td>温度</td>
                                                    <td>23.2</td>
                                                    <td>°C</td>
                                                    <td><span class="badge bg-success">优</span></td>
                                                </tr>
                                                <tr>
                                                    <td>3</td>
                                                    <td>2023-10-15 09:30:00</td>
                                                    <td>西湖监测站</td>
                                                    <td>TEMP-001</td>
                                                    <td>温度</td>
                                                    <td>22.9</td>
                                                    <td>°C</td>
                                                    <td><span class="badge bg-success">优</span></td>
                                                </tr>
                                                <tr>
                                                    <td>4</td>
                                                    <td>2023-10-15 09:15:00</td>
                                                    <td>西湖监测站</td>
                                                    <td>TEMP-001</td>
                                                    <td>温度</td>
                                                    <td>22.7</td>
                                                    <td>°C</td>
                                                    <td><span class="badge bg-success">优</span></td>
                                                </tr>
                                                <tr>
                                                    <td>5</td>
                                                    <td>2023-10-15 09:00:00</td>
                                                    <td>西湖监测站</td>
                                                    <td>TEMP-001</td>
                                                    <td>温度</td>
                                                    <td>22.5</td>
                                                    <td>°C</td>
                                                    <td><span class="badge bg-success">优</span></td>
                                                </tr>
                                                <tr>
                                                    <td>6</td>
                                                    <td>2023-10-15 08:45:00</td>
                                                    <td>西湖监测站</td>
                                                    <td>TEMP-001</td>
                                                    <td>温度</td>
                                                    <td>22.2</td>
                                                    <td>°C</td>
                                                    <td><span class="badge bg-success">优</span></td>
                                                </tr>
                                                <tr>
                                                    <td>7</td>
                                                    <td>2023-10-15 08:30:00</td>
                                                    <td>西湖监测站</td>
                                                    <td>TEMP-001</td>
                                                    <td>温度</td>
                                                    <td>21.8</td>
                                                    <td>°C</td>
                                                    <td><span class="badge bg-success">优</span></td>
                                                </tr>
                                                <tr>
                                                    <td>8</td>
                                                    <td>2023-10-15 08:15:00</td>
                                                    <td>西湖监测站</td>
                                                    <td>TEMP-001</td>
                                                    <td>温度</td>
                                                    <td>21.4</td>
                                                    <td>°C</td>
                                                    <td><span class="badge bg-success">优</span></td>
                                                </tr>
                                                <tr>
                                                    <td>9</td>
                                                    <td>2023-10-15 08:00:00</td>
                                                    <td>西湖监测站</td>
                                                    <td>TEMP-001</td>
                                                    <td>温度</td>
                                                    <td>21.0</td>
                                                    <td>°C</td>
                                                    <td><span class="badge bg-success">优</span></td>
                                                </tr>
                                                <tr>
                                                    <td>10</td>
                                                    <td>2023-10-15 07:45:00</td>
                                                    <td>西湖监测站</td>
                                                    <td>TEMP-001</td>
                                                    <td>温度</td>
                                                    <td>20.7</td>
                                                    <td>°C</td>
                                                    <td><span class="badge bg-success">优</span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        
                                        <nav aria-label="数据分页" class="mt-4">
                                            <ul class="pagination justify-content-center">
                                                <li class="page-item disabled">
                                                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                                                </li>
                                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                                <li class="page-item"><a class="page-link" href="#">2</a></li>
                                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                <li class="page-item">
                                                    <a class="page-link" href="#">下一页</a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                                
                                <div class="custom-card" style="display: none;">
                                    <div class="card-header">
                                        <span>数据图表</span>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button">
                                                折线图
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="rawDataChart" class="chart-container" style="height: 400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(frame);
        }
        
        // 创建统计数据查看原型
        function createStatisticsPrototype() {
            const container = document.querySelector('.prototype-frames-container');
            const frame = document.createElement('div');
            frame.id = 'prototype-statistics';
            frame.className = 'prototype-frame';
            
            frame.innerHTML = `
                <!-- 应用布局 -->
                <div class="sidebar">
                    <div class="logo">
                        <i class="fas fa-leaf"></i>
                        <span>环境数据助手</span>
                    </div>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-tachometer-alt"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-database"></i>
                                <span>原始数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <i class="fas fa-chart-bar"></i>
                                <span>统计数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-line"></i>
                                <span>数据分析</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-sliders-h"></i>
                                <span>数据标定</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-cog"></i>
                                <span>系统设置</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="top-navbar">
                    <div class="breadcrumb-container">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">首页</a></li>
                                <li class="breadcrumb-item active" aria-current="page">统计数据查看</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="user-dropdown">
                        <div class="avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <span>管理员</span>
                        <i class="fas fa-chevron-down ms-2"></i>
                    </div>
                </div>
                
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="row mb-4">
                            <div class="col-12">
                                <h2 class="mb-4">统计数据查看</h2>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>数据筛选</span>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-3 mb-3">
                                                <div class="form-group">
                                                    <label for="statSiteSelect" class="form-label">监测站点</label>
                                                    <select id="statSiteSelect" class="form-control">
                                                        <option value="">请选择监测站点</option>
                                                        <option value="site1" selected>西湖监测站</option>
                                                        <option value="site2">钱塘江站</option>
                                                        <option value="site3">千岛湖站</option>
                                                        <option value="site4">富春江站</option>
                                                        <option value="site5">太湖站</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="form-group">
                                                    <label for="statSensorSelect" class="form-label">传感器</label>
                                                    <select id="statSensorSelect" class="form-control">
                                                        <option value="">请选择传感器</option>
                                                        <option value="temp001" selected>温度传感器 (TEMP-001)</option>
                                                        <option value="hum003">湿度传感器 (HUM-003)</option>
                                                        <option value="voc002">VOC传感器 (VOC-002)</option>
                                                        <option value="pm001">PM2.5传感器 (PM-001)</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="form-group">
                                                    <label for="statDataTypeSelect" class="form-label">数据类型</label>
                                                    <select id="statDataTypeSelect" class="form-control">
                                                        <option value="">请选择数据类型</option>
                                                        <option value="temp" selected>温度 (°C)</option>
                                                        <option value="hum">湿度 (%)</option>
                                                        <option value="voc">VOC (ppm)</option>
                                                        <option value="pm25">PM2.5 (μg/m³)</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3 mb-3">
                                                <div class="form-group">
                                                    <label for="statTimeRange" class="form-label">时间范围</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="开始时间" value="2023-09-01">
                                                        <span class="input-group-text">至</span>
                                                        <input type="text" class="form-control" placeholder="结束时间" value="2023-10-15">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3 mb-3">
                                                <div class="form-group">
                                                    <label for="statGranularitySelect" class="form-label">时间粒度</label>
                                                    <select id="statGranularitySelect" class="form-control">
                                                        <option value="hour">小时</option>
                                                        <option value="day" selected>日</option>
                                                        <option value="week">周</option>
                                                        <option value="month">月</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">统计指标</label>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="statMean" checked>
                                                            <label class="form-check-label" for="statMean">均值</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="statMedian" checked>
                                                            <label class="form-check-label" for="statMedian">中位数</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="statMax" checked>
                                                            <label class="form-check-label" for="statMax">最大值</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="statMin" checked>
                                                            <label class="form-check-label" for="statMin">最小值</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="statStd" checked>
                                                            <label class="form-check-label" for="statStd">标准差</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="statQ1">
                                                            <label class="form-check-label" for="statQ1">四分位数(Q1, Q3)</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="statCV">
                                                            <label class="form-check-label" for="statCV">变异系数</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="statKurtosis">
                                                            <label class="form-check-label" for="statKurtosis">峰度</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="statSkewness">
                                                            <label class="form-check-label" for="statSkewness">偏度</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 text-end">
                                                <button class="btn btn-outline-secondary me-2">
                                                    <i class="fas fa-redo-alt me-1"></i>
                                                    重置
                                                </button>
                                                <button class="btn btn-primary">
                                                    <i class="fas fa-chart-bar me-1"></i>
                                                    生成统计
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="custom-tabs">
                                    <div class="tab active">统计结果</div>
                                    <div class="tab">箱线图</div>
                                    <div class="tab">柱状图</div>
                                    <div class="tab">直方图</div>
                                </div>
                            </div>
                            <div class="col-md-6 text-end">
                                <button class="btn btn-outline-success me-2">
                                    <i class="fas fa-file-excel me-1"></i>
                                    导出Excel
                                </button>
                                <button class="btn btn-outline-danger me-2">
                                    <i class="fas fa-file-pdf me-1"></i>
                                    导出PDF
                                </button>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <!-- 统计结果表格 -->
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>西湖监测站 - 温度传感器(TEMP-001) - 温度统计数据</span>
                                        <span class="text-muted">2023-09-01 至 2023-10-15 (日粒度)</span>
                                    </div>
                                    <div class="card-body">
                                        <table class="custom-table">
                                            <thead>
                                                <tr>
                                                    <th>日期</th>
                                                    <th>均值</th>
                                                    <th>中位数</th>
                                                    <th>最大值</th>
                                                    <th>最小值</th>
                                                    <th>标准差</th>
                                                    <th>数据点数</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>2023-10-15</td>
                                                    <td>22.4</td>
                                                    <td>22.2</td>
                                                    <td>25.8</td>
                                                    <td>18.7</td>
                                                    <td>1.85</td>
                                                    <td>24</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-14</td>
                                                    <td>21.9</td>
                                                    <td>21.7</td>
                                                    <td>25.2</td>
                                                    <td>18.3</td>
                                                    <td>1.92</td>
                                                    <td>24</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-13</td>
                                                    <td>21.6</td>
                                                    <td>21.4</td>
                                                    <td>24.9</td>
                                                    <td>17.8</td>
                                                    <td>1.98</td>
                                                    <td>24</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-12</td>
                                                    <td>22.1</td>
                                                    <td>21.9</td>
                                                    <td>25.5</td>
                                                    <td>18.5</td>
                                                    <td>1.89</td>
                                                    <td>24</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-11</td>
                                                    <td>22.8</td>
                                                    <td>22.5</td>
                                                    <td>26.3</td>
                                                    <td>19.1</td>
                                                    <td>1.77</td>
                                                    <td>24</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-10</td>
                                                    <td>23.2</td>
                                                    <td>23.0</td>
                                                    <td>26.8</td>
                                                    <td>19.5</td>
                                                    <td>1.72</td>
                                                    <td>24</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-09</td>
                                                    <td>23.5</td>
                                                    <td>23.3</td>
                                                    <td>27.1</td>
                                                    <td>19.7</td>
                                                    <td>1.69</td>
                                                    <td>24</td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr class="fw-bold">
                                                    <td>整体统计</td>
                                                    <td>22.5</td>
                                                    <td>22.3</td>
                                                    <td>27.1</td>
                                                    <td>17.8</td>
                                                    <td>1.83</td>
                                                    <td>1080</td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                                
                                <!-- 箱线图 -->
                                <div class="custom-card mb-4" style="display: none;">
                                    <div class="card-header">
                                        <span>西湖监测站 - 温度传感器(TEMP-001) - 温度数据分布</span>
                                        <span class="text-muted">2023-09-01 至 2023-10-15 (日粒度)</span>
                                    </div>
                                    <div class="card-body">
                                        <div id="boxplotChart" class="chart-container" style="height: 500px;"></div>
                                    </div>
                                </div>
                                
                                <!-- 柱状图 -->
                                <div class="custom-card mb-4" style="display: none;">
                                    <div class="card-header">
                                        <span>西湖监测站 - 温度传感器(TEMP-001) - 温度均值对比</span>
                                        <span class="text-muted">2023-09-01 至 2023-10-15 (日粒度)</span>
                                    </div>
                                    <div class="card-body">
                                        <div id="barChart" class="chart-container" style="height: 500px;"></div>
                                    </div>
                                </div>
                                
                                <!-- 直方图 -->
                                <div class="custom-card mb-4" style="display: none;">
                                    <div class="card-header">
                                        <span>西湖监测站 - 温度传感器(TEMP-001) - 温度频率分布</span>
                                        <span class="text-muted">2023-09-01 至 2023-10-15</span>
                                    </div>
                                    <div class="card-body">
                                        <div id="histogramChart" class="chart-container" style="height: 500px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(frame);
        }
        
        // 创建相关性分析原型
        function createCorrelationAnalysisPrototype() {
            const container = document.querySelector('.prototype-frames-container');
            const frame = document.createElement('div');
            frame.id = 'prototype-correlation';
            frame.className = 'prototype-frame';
            
            frame.innerHTML = `
                <!-- 应用布局 -->
                <div class="sidebar">
                    <div class="logo">
                        <i class="fas fa-leaf"></i>
                        <span>环境数据助手</span>
                    </div>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-tachometer-alt"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-database"></i>
                                <span>原始数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-bar"></i>
                                <span>统计数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <i class="fas fa-chart-line"></i>
                                <span>数据分析</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-sliders-h"></i>
                                <span>数据标定</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-cog"></i>
                                <span>系统设置</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="top-navbar">
                    <div class="breadcrumb-container">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">首页</a></li>
                                <li class="breadcrumb-item"><a href="#">数据分析</a></li>
                                <li class="breadcrumb-item active" aria-current="page">相关性分析</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="user-dropdown">
                        <div class="avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <span>管理员</span>
                        <i class="fas fa-chevron-down ms-2"></i>
                    </div>
                </div>
                
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="row mb-4">
                            <div class="col-12">
                                <h2 class="mb-4">相关性分析</h2>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>参数选择</span>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">选择站点</label>
                                                    <select class="form-control">
                                                        <option>西湖监测站</option>
                                                        <option>钱塘江站</option>
                                                        <option>千岛湖站</option>
                                                        <option>富春江站</option>
                                                        <option>太湖站</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">时间范围</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="开始时间" value="2023-09-01">
                                                        <span class="input-group-text">至</span>
                                                        <input type="text" class="form-control" placeholder="结束时间" value="2023-10-15">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-12 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">选择参数</label>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="form-check me-4">
                                                            <input class="form-check-input" type="checkbox" value="" id="param1" checked>
                                                            <label class="form-check-label" for="param1">温度 (°C)</label>
                                                        </div>
                                                        <div class="form-check me-4">
                                                            <input class="form-check-input" type="checkbox" value="" id="param2" checked>
                                                            <label class="form-check-label" for="param2">湿度 (%)</label>
                                                        </div>
                                                        <div class="form-check me-4">
                                                            <input class="form-check-input" type="checkbox" value="" id="param3" checked>
                                                            <label class="form-check-label" for="param3">气压 (hPa)</label>
                                                        </div>
                                                        <div class="form-check me-4">
                                                            <input class="form-check-input" type="checkbox" value="" id="param4" checked>
                                                            <label class="form-check-label" for="param4">PM2.5 (μg/m³)</label>
                                                        </div>
                                                        <div class="form-check me-4">
                                                            <input class="form-check-input" type="checkbox" value="" id="param5" checked>
                                                            <label class="form-check-label" for="param5">PM10 (μg/m³)</label>
                                                        </div>
                                                        <div class="form-check me-4">
                                                            <input class="form-check-input" type="checkbox" value="" id="param6">
                                                            <label class="form-check-label" for="param6">VOC (ppm)</label>
                                                        </div>
                                                        <div class="form-check me-4">
                                                            <input class="form-check-input" type="checkbox" value="" id="param7">
                                                            <label class="form-check-label" for="param7">CO2 (ppm)</label>
                                                        </div>
                                                        <div class="form-check me-4">
                                                            <input class="form-check-input" type="checkbox" value="" id="param8">
                                                            <label class="form-check-label" for="param8">风速 (m/s)</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">相关系数类型</label>
                                                    <select class="form-control">
                                                        <option selected>Pearson相关系数</option>
                                                        <option>Spearman等级相关系数</option>
                                                        <option>Kendall等级相关系数</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">显著性水平</label>
                                                    <select class="form-control">
                                                        <option>0.01</option>
                                                        <option selected>0.05</option>
                                                        <option>0.1</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">时间粒度</label>
                                                    <select class="form-control">
                                                        <option>小时</option>
                                                        <option selected>日</option>
                                                        <option>周</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12 text-end">
                                                <button class="btn btn-outline-secondary me-2">
                                                    <i class="fas fa-redo-alt me-1"></i>
                                                    重置
                                                </button>
                                                <button class="btn btn-primary">
                                                    <i class="fas fa-calculator me-1"></i>
                                                    计算相关性
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-7">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>相关性热力图</span>
                                        <button class="btn btn-sm btn-outline-secondary">
                                            <i class="fas fa-download me-1"></i>
                                            导出图表
                                        </button>
                                    </div>
                                    <div class="card-body">
                                        <div id="correlationHeatmap" class="chart-container" style="height: 500px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>相关系数表</span>
                                        <button class="btn btn-sm btn-outline-success">
                                            <i class="fas fa-file-excel me-1"></i>
                                            导出Excel
                                        </button>
                                    </div>
                                    <div class="card-body">
                                        <table class="custom-table">
                                            <thead>
                                                <tr>
                                                    <th>参数对</th>
                                                    <th>相关系数</th>
                                                    <th>p值</th>
                                                    <th>显著性</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>温度 - 湿度</td>
                                                    <td>-0.72</td>
                                                    <td>0.0001</td>
                                                    <td><i class="fas fa-check text-success"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>温度 - 气压</td>
                                                    <td>-0.34</td>
                                                    <td>0.0212</td>
                                                    <td><i class="fas fa-check text-success"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>温度 - PM2.5</td>
                                                    <td>0.19</td>
                                                    <td>0.2134</td>
                                                    <td><i class="fas fa-times text-danger"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>温度 - PM10</td>
                                                    <td>0.21</td>
                                                    <td>0.1765</td>
                                                    <td><i class="fas fa-times text-danger"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>湿度 - 气压</td>
                                                    <td>0.17</td>
                                                    <td>0.2731</td>
                                                    <td><i class="fas fa-times text-danger"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>湿度 - PM2.5</td>
                                                    <td>0.52</td>
                                                    <td>0.0004</td>
                                                    <td><i class="fas fa-check text-success"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>湿度 - PM10</td>
                                                    <td>0.48</td>
                                                    <td>0.0011</td>
                                                    <td><i class="fas fa-check text-success"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>气压 - PM2.5</td>
                                                    <td>-0.23</td>
                                                    <td>0.1348</td>
                                                    <td><i class="fas fa-times text-danger"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>气压 - PM10</td>
                                                    <td>-0.28</td>
                                                    <td>0.0674</td>
                                                    <td><i class="fas fa-check text-warning"></i></td>
                                                </tr>
                                                <tr>
                                                    <td>PM2.5 - PM10</td>
                                                    <td>0.94</td>
                                                    <td>0.0000</td>
                                                    <td><i class="fas fa-check text-success"></i></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>散点图矩阵</span>
                                        <button class="btn btn-sm btn-outline-info">
                                            <i class="fas fa-file-image me-1"></i>
                                            导出图像
                                        </button>
                                    </div>
                                    <div class="card-body">
                                        <div id="scatterplotMatrix" class="chart-container" style="height: 600px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(frame);
        }
        
        // 创建趋势对比分析原型
        function createTrendAnalysisPrototype() {
            const container = document.querySelector('.prototype-frames-container');
            const frame = document.createElement('div');
            frame.id = 'prototype-trend';
            frame.className = 'prototype-frame';
            
            frame.innerHTML = `
                <!-- 应用布局 -->
                <div class="sidebar">
                    <div class="logo">
                        <i class="fas fa-leaf"></i>
                        <span>环境数据助手</span>
                    </div>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-tachometer-alt"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-database"></i>
                                <span>原始数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-bar"></i>
                                <span>统计数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <i class="fas fa-chart-line"></i>
                                <span>数据分析</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-sliders-h"></i>
                                <span>数据标定</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-cog"></i>
                                <span>系统设置</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="top-navbar">
                    <div class="breadcrumb-container">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">首页</a></li>
                                <li class="breadcrumb-item"><a href="#">数据分析</a></li>
                                <li class="breadcrumb-item active" aria-current="page">趋势对比分析</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="user-dropdown">
                        <div class="avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <span>管理员</span>
                        <i class="fas fa-chevron-down ms-2"></i>
                    </div>
                </div>
                
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="row mb-4">
                            <div class="col-12">
                                <h2 class="mb-4">趋势对比分析</h2>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>参数选择</span>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">选择站点组</label>
                                                    <select class="form-control" multiple size="5">
                                                        <option selected>西湖监测站</option>
                                                        <option selected>钱塘江站</option>
                                                        <option>千岛湖站</option>
                                                        <option>富春江站</option>
                                                        <option>太湖站</option>
                                                    </select>
                                                    <small class="form-text text-muted">按住Ctrl键可以多选</small>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">数据类型</label>
                                                    <select class="form-control">
                                                        <option>温度 (°C)</option>
                                                        <option>湿度 (%)</option>
                                                        <option selected>PM2.5 (μg/m³)</option>
                                                        <option>PM10 (μg/m³)</option>
                                                        <option>VOC (ppm)</option>
                                                        <option>CO2 (ppm)</option>
                                                    </select>
                                                </div>
                                                
                                                <div class="form-group mt-3">
                                                    <label class="form-label">时间范围</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="开始时间" value="2023-09-01">
                                                        <span class="input-group-text">至</span>
                                                        <input type="text" class="form-control" placeholder="结束时间" value="2023-10-15">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">时间粒度</label>
                                                    <select class="form-control">
                                                        <option>小时</option>
                                                        <option selected>日</option>
                                                        <option>周</option>
                                                        <option>月</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">聚合方式</label>
                                                    <select class="form-control">
                                                        <option selected>平均值</option>
                                                        <option>中位数</option>
                                                        <option>最大值</option>
                                                        <option>最小值</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">图表类型</label>
                                                    <select class="form-control">
                                                        <option selected>折线图</option>
                                                        <option>面积图</option>
                                                        <option>柱状图</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12 text-end">
                                                <button class="btn btn-outline-secondary me-2">
                                                    <i class="fas fa-redo-alt me-1"></i>
                                                    重置
                                                </button>
                                                <button class="btn btn-primary">
                                                    <i class="fas fa-chart-line me-1"></i>
                                                    生成趋势图
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>PM2.5浓度趋势对比 (西湖监测站 vs 钱塘江站)</span>
                                        <div>
                                            <button class="btn btn-sm btn-outline-info me-2">
                                                <i class="fas fa-file-image me-1"></i>
                                                导出图像
                                            </button>
                                            <button class="btn btn-sm btn-outline-success">
                                                <i class="fas fa-file-excel me-1"></i>
                                                导出数据
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="trendComparisonChart" class="chart-container" style="height: 400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>统计比较</span>
                                    </div>
                                    <div class="card-body">
                                        <table class="custom-table">
                                            <thead>
                                                <tr>
                                                    <th>统计量</th>
                                                    <th>西湖监测站</th>
                                                    <th>钱塘江站</th>
                                                    <th>差异</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>平均值</td>
                                                    <td>35.7 μg/m³</td>
                                                    <td>42.3 μg/m³</td>
                                                    <td class="text-danger">+18.5%</td>
                                                </tr>
                                                <tr>
                                                    <td>中位数</td>
                                                    <td>32.5 μg/m³</td>
                                                    <td>38.9 μg/m³</td>
                                                    <td class="text-danger">+19.7%</td>
                                                </tr>
                                                <tr>
                                                    <td>最大值</td>
                                                    <td>78.2 μg/m³</td>
                                                    <td>96.5 μg/m³</td>
                                                    <td class="text-danger">+23.4%</td>
                                                </tr>
                                                <tr>
                                                    <td>最小值</td>
                                                    <td>12.3 μg/m³</td>
                                                    <td>15.8 μg/m³</td>
                                                    <td class="text-danger">+28.5%</td>
                                                </tr>
                                                <tr>
                                                    <td>标准差</td>
                                                    <td>15.3 μg/m³</td>
                                                    <td>19.7 μg/m³</td>
                                                    <td class="text-danger">+28.8%</td>
                                                </tr>
                                                <tr>
                                                    <td>95%分位数</td>
                                                    <td>67.8 μg/m³</td>
                                                    <td>82.3 μg/m³</td>
                                                    <td class="text-danger">+21.4%</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>PM2.5浓度分布对比</span>
                                    </div>
                                    <div class="card-body">
                                        <div id="distributionComparisonChart" class="chart-container" style="height: 350px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>分析结论</span>
                                    </div>
                                    <div class="card-body">
                                        <div class="alert alert-info" role="alert">
                                            <h5 class="alert-heading">主要发现</h5>
                                            <ol>
                                                <li>钱塘江站的PM2.5浓度普遍高于西湖监测站，平均高18.5%。</li>
                                                <li>两个站点的PM2.5浓度变化趋势基本保持一致，相关系数为0.87。</li>
                                                <li>钱塘江站的PM2.5浓度波动更大，标准差比西湖监测站高28.8%。</li>
                                                <li>两个站点的PM2.5浓度都在9月中旬出现峰值，可能与气象条件有关。</li>
                                                <li>西湖监测站的空气质量整体优于钱塘江站，超标天数更少。</li>
                                            </ol>
                                            <hr>
                                            <p class="mb-0">建议进一步分析钱塘江站PM2.5浓度偏高的原因，可能与工业活动、交通流量或地形因素有关。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(frame);
        }
        
        // 创建预测分析原型
        function createForecastAnalysisPrototype() {
            const container = document.querySelector('.prototype-frames-container');
            const frame = document.createElement('div');
            frame.id = 'prototype-forecast';
            frame.className = 'prototype-frame';
            
            frame.innerHTML = `
                <!-- 应用布局 -->
                <div class="sidebar">
                    <div class="logo">
                        <i class="fas fa-leaf"></i>
                        <span>环境数据助手</span>
                    </div>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-tachometer-alt"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-database"></i>
                                <span>原始数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-bar"></i>
                                <span>统计数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <i class="fas fa-chart-line"></i>
                                <span>数据分析</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-sliders-h"></i>
                                <span>数据标定</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-cog"></i>
                                <span>系统设置</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="top-navbar">
                    <div class="breadcrumb-container">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">首页</a></li>
                                <li class="breadcrumb-item"><a href="#">数据分析</a></li>
                                <li class="breadcrumb-item active" aria-current="page">预测分析</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="user-dropdown">
                        <div class="avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <span>管理员</span>
                        <i class="fas fa-chevron-down ms-2"></i>
                    </div>
                </div>
                
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="row mb-4">
                            <div class="col-12">
                                <h2 class="mb-4">预测分析</h2>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>预测参数设置</span>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">选择站点</label>
                                                    <select class="form-control">
                                                        <option selected>西湖监测站</option>
                                                        <option>钱塘江站</option>
                                                        <option>千岛湖站</option>
                                                        <option>富春江站</option>
                                                        <option>太湖站</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">预测参数</label>
                                                    <select class="form-control">
                                                        <option>温度 (°C)</option>
                                                        <option>湿度 (%)</option>
                                                        <option selected>PM2.5 (μg/m³)</option>
                                                        <option>PM10 (μg/m³)</option>
                                                        <option>VOC (ppm)</option>
                                                        <option>CO2 (ppm)</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">训练数据时间范围</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="开始时间" value="2023-07-01">
                                                        <span class="input-group-text">至</span>
                                                        <input type="text" class="form-control" placeholder="结束时间" value="2023-10-15">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">预测模型</label>
                                                    <select class="form-control">
                                                        <option>ARIMA</option>
                                                        <option selected>SARIMA</option>
                                                        <option>Prophet</option>
                                                        <option>LSTM</option>
                                                        <option>XGBoost</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">预测时长</label>
                                                    <select class="form-control">
                                                        <option>3天</option>
                                                        <option selected>7天</option>
                                                        <option>14天</option>
                                                        <option>30天</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">数据粒度</label>
                                                    <select class="form-control">
                                                        <option>小时</option>
                                                        <option selected>日</option>
                                                        <option>周</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">置信区间</label>
                                                    <select class="form-control">
                                                        <option>80%</option>
                                                        <option selected>95%</option>
                                                        <option>99%</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-8 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">包含外部特征</label>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="includeTemp" checked>
                                                            <label class="form-check-label" for="includeTemp">温度</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="includeHum" checked>
                                                            <label class="form-check-label" for="includeHum">湿度</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="includeWind" checked>
                                                            <label class="form-check-label" for="includeWind">风速/风向</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="includePressure">
                                                            <label class="form-check-label" for="includePressure">气压</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="includeWeather" checked>
                                                            <label class="form-check-label" for="includeWeather">天气状况</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="includeHoliday">
                                                            <label class="form-check-label" for="includeHoliday">节假日</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12 text-end">
                                                <button class="btn btn-outline-secondary me-2">
                                                    <i class="fas fa-redo-alt me-1"></i>
                                                    重置
                                                </button>
                                                <button class="btn btn-primary">
                                                    <i class="fas fa-chart-line me-1"></i>
                                                    开始预测
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>PM2.5浓度预测结果 (西湖监测站)</span>
                                        <div>
                                            <button class="btn btn-sm btn-outline-info me-2">
                                                <i class="fas fa-file-image me-1"></i>
                                                导出图表
                                            </button>
                                            <button class="btn btn-sm btn-outline-success">
                                                <i class="fas fa-file-excel me-1"></i>
                                                导出数据
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="forecastChart" class="chart-container" style="height: 400px;"></div>
                                        <div class="mt-3">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="me-2">图例:</span>
                                                <span class="me-3"><i class="fas fa-circle text-primary me-1"></i> 历史数据</span>
                                                <span class="me-3"><i class="fas fa-circle text-danger me-1"></i> 预测值</span>
                                                <span><i class="fas fa-square text-secondary me-1" style="opacity: 0.3;"></i> 95%置信区间</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>预测值详情</span>
                                    </div>
                                    <div class="card-body">
                                        <table class="custom-table">
                                            <thead>
                                                <tr>
                                                    <th>日期</th>
                                                    <th>预测值</th>
                                                    <th>95%置信区间下限</th>
                                                    <th>95%置信区间上限</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>2023-10-16</td>
                                                    <td>32.5 μg/m³</td>
                                                    <td>28.7 μg/m³</td>
                                                    <td>36.3 μg/m³</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-17</td>
                                                    <td>34.8 μg/m³</td>
                                                    <td>30.2 μg/m³</td>
                                                    <td>39.4 μg/m³</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-18</td>
                                                    <td>37.6 μg/m³</td>
                                                    <td>32.1 μg/m³</td>
                                                    <td>43.1 μg/m³</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-19</td>
                                                    <td>35.2 μg/m³</td>
                                                    <td>29.5 μg/m³</td>
                                                    <td>40.9 μg/m³</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-20</td>
                                                    <td>33.8 μg/m³</td>
                                                    <td>27.6 μg/m³</td>
                                                    <td>40.0 μg/m³</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-21</td>
                                                    <td>38.5 μg/m³</td>
                                                    <td>31.2 μg/m³</td>
                                                    <td>45.8 μg/m³</td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-22</td>
                                                    <td>42.3 μg/m³</td>
                                                    <td>34.1 μg/m³</td>
                                                    <td>50.5 μg/m³</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>预测模型评估</span>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label fw-bold">模型信息</label>
                                                    <div class="mb-2">
                                                        <span class="d-block">模型类型: SARIMA</span>
                                                        <span class="d-block">参数: (2,1,1)(1,1,1,7)</span>
                                                        <span class="d-block">训练周期: 107 天</span>
                                                        <span class="d-block">数据点数: 107 个</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label fw-bold">模型评估指标</label>
                                                    <div class="mb-2">
                                                        <span class="d-block">RMSE: 4.32 μg/m³</span>
                                                        <span class="d-block">MAE: 3.18 μg/m³</span>
                                                        <span class="d-block">MAPE: 8.5%</span>
                                                        <span class="d-block">R²: 0.83</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="alert alert-info" role="alert">
                                                    <h5 class="alert-heading">预测要点</h5>
                                                    <ul>
                                                        <li>未来7天PM2.5整体浓度呈现波动上升趋势</li>
                                                        <li>10月22日预计达到峰值 42.3 μg/m³</li>
                                                        <li>预测期内空气质量整体保持良好水平</li>
                                                        <li>无超标风险（国家标准75μg/m³）</li>
                                                    </ul>
                                                    <hr>
                                                    <p class="mb-0">预测考虑了温度、湿度、风速等因素，但天气变化可能导致实际值出现偏差。</p>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12">
                                                <div id="residualPlot" class="chart-container" style="height: 200px;"></div>
                                                <p class="text-center text-muted small">残差分布图</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(frame);
        }
        
        // 创建数据标定原型
        function createCalibrationPrototype() {
            const container = document.querySelector('.prototype-frames-container');
            const frame = document.createElement('div');
            frame.id = 'prototype-calibration';
            frame.className = 'prototype-frame';
            
            frame.innerHTML = `
                <!-- 应用布局 -->
                <div class="sidebar">
                    <div class="logo">
                        <i class="fas fa-leaf"></i>
                        <span>环境数据助手</span>
                    </div>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-tachometer-alt"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-database"></i>
                                <span>原始数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-bar"></i>
                                <span>统计数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-line"></i>
                                <span>数据分析</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <i class="fas fa-sliders-h"></i>
                                <span>数据标定</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-cog"></i>
                                <span>系统设置</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="top-navbar">
                    <div class="breadcrumb-container">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">首页</a></li>
                                <li class="breadcrumb-item active" aria-current="page">数据标定</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="user-dropdown">
                        <div class="avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <span>管理员</span>
                        <i class="fas fa-chevron-down ms-2"></i>
                    </div>
                </div>
                
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="row mb-4">
                            <div class="col-12">
                                <h2 class="mb-4">数据标定</h2>
                            </div>
                        </div>
                        
                        <div class="custom-tabs mb-4">
                            <div class="tab active">标定模型拟合</div>
                            <div class="tab">标定模型应用</div>
                            <div class="tab">标定模型管理</div>
                        </div>
                        
                        <!-- 标定模型拟合 -->
                        <div class="row">
                            <div class="col-12">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>标定参数设置</span>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">选择站点</label>
                                                    <select class="form-control">
                                                        <option selected>西湖监测站</option>
                                                        <option>钱塘江站</option>
                                                        <option>千岛湖站</option>
                                                        <option>富春江站</option>
                                                        <option>太湖站</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">选择传感器</label>
                                                    <select class="form-control">
                                                        <option selected>PM2.5传感器 (PM-001)</option>
                                                        <option>PM10传感器 (PM-002)</option>
                                                        <option>温度传感器 (TEMP-001)</option>
                                                        <option>湿度传感器 (HUM-003)</option>
                                                        <option>VOC传感器 (VOC-002)</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">标定参考设备</label>
                                                    <select class="form-control">
                                                        <option>无（单传感器标定）</option>
                                                        <option>温度参考仪 (REF-TEMP-01)</option>
                                                        <option>湿度参考仪 (REF-HUM-01)</option>
                                                        <option selected>国标PM2.5监测仪 (REF-PM25-01)</option>
                                                        <option>国标PM10监测仪 (REF-PM10-01)</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">标定样本数据</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="开始时间" value="2023-09-01">
                                                        <span class="input-group-text">至</span>
                                                        <input type="text" class="form-control" placeholder="结束时间" value="2023-09-30">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">标定模型类型</label>
                                                    <select class="form-control">
                                                        <option selected>线性回归</option>
                                                        <option>二次多项式</option>
                                                        <option>支持向量回归 (SVR)</option>
                                                        <option>随机森林回归</option>
                                                        <option>多层感知器 (MLP)</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">考虑影响因素</label>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="factorTemp" checked>
                                                            <label class="form-check-label" for="factorTemp">温度</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="factorHum" checked>
                                                            <label class="form-check-label" for="factorHum">湿度</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="factorPressure">
                                                            <label class="form-check-label" for="factorPressure">气压</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">数据预处理</label>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="removeOutliers" checked>
                                                            <label class="form-check-label" for="removeOutliers">去除异常值</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="normalize" checked>
                                                            <label class="form-check-label" for="normalize">归一化</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">交叉验证折数</label>
                                                    <select class="form-control">
                                                        <option>3折</option>
                                                        <option selected>5折</option>
                                                        <option>10折</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">训练-测试分割比例</label>
                                                    <select class="form-control">
                                                        <option>60% - 40%</option>
                                                        <option selected>70% - 30%</option>
                                                        <option>80% - 20%</option>
                                                        <option>90% - 10%</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">模型名称</label>
                                                    <input type="text" class="form-control" placeholder="模型名称" value="PM25_西湖站_线性模型_V1">
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12 text-end">
                                                <button class="btn btn-outline-secondary me-2">
                                                    <i class="fas fa-redo-alt me-1"></i>
                                                    重置
                                                </button>
                                                <button class="btn btn-primary">
                                                    <i class="fas fa-cog me-1"></i>
                                                    拟合模型
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>标定拟合结果</span>
                                        <button class="btn btn-sm btn-outline-info">
                                            <i class="fas fa-download me-1"></i>
                                            导出图表
                                        </button>
                                    </div>
                                    <div class="card-body">
                                        <div id="calibrationChart" class="chart-container" style="height: 350px;"></div>
                                        <div class="mt-3">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="me-2">图例:</span>
                                                <span class="me-3"><i class="fas fa-circle text-primary me-1"></i> 低成本传感器数据</span>
                                                <span class="me-3"><i class="fas fa-circle text-success me-1"></i> 标准参考设备数据</span>
                                                <span><i class="fas fa-circle text-danger me-1"></i> 标定拟合曲线</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>模型评估</span>
                                    </div>
                                    <div class="card-body">
                                        <div class="model-info-item">
                                            <span class="label">模型类型:</span>
                                            <span>线性回归</span>
                                        </div>
                                        <div class="model-info-item">
                                            <span class="label">决定系数(R²):</span>
                                            <span>0.926</span>
                                        </div>
                                        <div class="model-info-item">
                                            <span class="label">调整后的R²:</span>
                                            <span>0.921</span>
                                        </div>
                                        <div class="model-info-item">
                                            <span class="label">均方根误差(RMSE):</span>
                                            <span>3.42 μg/m³</span>
                                        </div>
                                        <div class="model-info-item">
                                            <span class="label">平均绝对误差(MAE):</span>
                                            <span>2.65 μg/m³</span>
                                        </div>
                                        <div class="model-info-item">
                                            <span class="label">平均绝对百分比误差(MAPE):</span>
                                            <span>8.32%</span>
                                        </div>
                                        <div class="model-info-item">
                                            <span class="label">样本数量:</span>
                                            <span>720个点</span>
                                        </div>
                                        
                                        <div class="alert alert-success mt-3" role="alert">
                                            <h5 class="alert-heading">模型评估结果</h5>
                                            <p>模型质量良好，R²达到0.926，表明模型能够解释92.6%的数据变异。RMSE和MAE较低，模型在不同数据范围内表现较为稳定。</p>
                                        </div>
                                        
                                        <div class="mt-3">
                                            <h6>模型方程</h6>
                                            <div class="alert alert-light" role="alert">
                                                <p class="mb-0">y = 1.23x - 2.56 + 0.15T - 0.08H</p>
                                                <small>其中，x为传感器读数，T为温度，H为湿度</small>
                                            </div>
                                        </div>
                                        
                                        <div class="mt-3 text-center">
                                            <button class="btn btn-success">
                                                <i class="fas fa-save me-1"></i>
                                                保存模型
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>残差分析</span>
                                    </div>
                                    <div class="card-body">
                                        <div id="residualChart" class="chart-container" style="height: 300px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>交叉验证结果</span>
                                    </div>
                                    <div class="card-body">
                                        <table class="custom-table">
                                            <thead>
                                                <tr>
                                                    <th>验证折数</th>
                                                    <th>R²</th>
                                                    <th>RMSE</th>
                                                    <th>MAE</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>折数 1</td>
                                                    <td>0.919</td>
                                                    <td>3.58</td>
                                                    <td>2.79</td>
                                                </tr>
                                                <tr>
                                                    <td>折数 2</td>
                                                    <td>0.932</td>
                                                    <td>3.25</td>
                                                    <td>2.52</td>
                                                </tr>
                                                <tr>
                                                    <td>折数 3</td>
                                                    <td>0.925</td>
                                                    <td>3.40</td>
                                                    <td>2.63</td>
                                                </tr>
                                                <tr>
                                                    <td>折数 4</td>
                                                    <td>0.930</td>
                                                    <td>3.32</td>
                                                    <td>2.58</td>
                                                </tr>
                                                <tr>
                                                    <td>折数 5</td>
                                                    <td>0.924</td>
                                                    <td>3.45</td>
                                                    <td>2.71</td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr class="fw-bold">
                                                    <td>平均值</td>
                                                    <td>0.926</td>
                                                    <td>3.40</td>
                                                    <td>2.65</td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(frame);
        }
        
        // 创建异常检测分析原型
        function createAnomalyAnalysisPrototype() {
            const container = document.querySelector('.prototype-frames-container');
            const frame = document.createElement('div');
            frame.id = 'prototype-anomaly';
            frame.className = 'prototype-frame';
            
            frame.innerHTML = `
                <!-- 应用布局 -->
                <div class="sidebar">
                    <div class="logo">
                        <i class="fas fa-leaf"></i>
                        <span>环境数据助手</span>
                    </div>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-tachometer-alt"></i>
                                <span>仪表盘</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-database"></i>
                                <span>原始数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-chart-bar"></i>
                                <span>统计数据</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <i class="fas fa-chart-line"></i>
                                <span>数据分析</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-sliders-h"></i>
                                <span>数据标定</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <i class="fas fa-cog"></i>
                                <span>系统设置</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div class="top-navbar">
                    <div class="breadcrumb-container">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="#">首页</a></li>
                                <li class="breadcrumb-item"><a href="#">数据分析</a></li>
                                <li class="breadcrumb-item active" aria-current="page">异常检测分析</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="user-dropdown">
                        <div class="avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <span>管理员</span>
                        <i class="fas fa-chevron-down ms-2"></i>
                    </div>
                </div>
                
                <div class="main-content">
                    <div class="container-fluid">
                        <div class="row mb-4">
                            <div class="col-12">
                                <h2 class="mb-4">异常检测分析</h2>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>异常检测设置</span>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">选择站点</label>
                                                    <select class="form-control">
                                                        <option>西湖监测站</option>
                                                        <option selected>钱塘江站</option>
                                                        <option>千岛湖站</option>
                                                        <option>富春江站</option>
                                                        <option>太湖站</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">选择参数</label>
                                                    <select class="form-control">
                                                        <option>温度 (°C)</option>
                                                        <option>湿度 (%)</option>
                                                        <option>PM2.5 (μg/m³)</option>
                                                        <option selected>VOC (ppm)</option>
                                                        <option>CO2 (ppm)</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">数据时间范围</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" placeholder="开始时间" value="2023-09-01">
                                                        <span class="input-group-text">至</span>
                                                        <input type="text" class="form-control" placeholder="结束时间" value="2023-10-15">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">异常检测算法</label>
                                                    <select class="form-control">
                                                        <option selected>统计阈值法</option>
                                                        <option>Z-分数法</option>
                                                        <option>IQR法</option>
                                                        <option>LOF (局部异常因子)</option>
                                                        <option>孤立森林</option>
                                                        <option>LSTM自编码器</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">灵敏度</label>
                                                    <select class="form-control">
                                                        <option>低 (少量异常)</option>
                                                        <option selected>中等</option>
                                                        <option>高 (多量异常)</option>
                                                        <option>自定义</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">数据粒度</label>
                                                    <select class="form-control">
                                                        <option selected>小时</option>
                                                        <option>日</option>
                                                        <option>周</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-4 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">自定义阈值</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">下限</span>
                                                        <input type="text" class="form-control" placeholder="下限" value="0.5">
                                                        <span class="input-group-text">上限</span>
                                                        <input type="text" class="form-control" placeholder="上限" value="1.8">
                                                    </div>
                                                    <small class="form-text text-muted">标准差倍数（例如：低于均值-2.5倍标准差或高于均值+2.5倍标准差）</small>
                                                </div>
                                            </div>
                                            <div class="col-md-8 mb-3">
                                                <div class="form-group">
                                                    <label class="form-label">其他选项</label>
                                                    <div class="d-flex flex-wrap">
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="ignoreZeros" checked>
                                                            <label class="form-check-label" for="ignoreZeros">忽略零值</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="ignoreNeg" checked>
                                                            <label class="form-check-label" for="ignoreNeg">忽略负值</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="smoothData">
                                                            <label class="form-check-label" for="smoothData">预处理平滑数据</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="considerSeasonal" checked>
                                                            <label class="form-check-label" for="considerSeasonal">考虑季节性变化</label>
                                                        </div>
                                                        <div class="form-check me-3">
                                                            <input class="form-check-input" type="checkbox" value="" id="detectTrend" checked>
                                                            <label class="form-check-label" for="detectTrend">检测趋势异常</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-12 text-end">
                                                <button class="btn btn-outline-secondary me-2">
                                                    <i class="fas fa-redo-alt me-1"></i>
                                                    重置
                                                </button>
                                                <button class="btn btn-primary">
                                                    <i class="fas fa-search me-1"></i>
                                                    检测异常
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>VOC浓度异常检测结果 (钱塘江站)</span>
                                        <div>
                                            <button class="btn btn-sm btn-outline-info me-2">
                                                <i class="fas fa-file-image me-1"></i>
                                                导出图表
                                            </button>
                                            <button class="btn btn-sm btn-outline-success">
                                                <i class="fas fa-file-excel me-1"></i>
                                                导出数据
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div id="anomalyChart" class="chart-container" style="height: 350px;"></div>
                                        <div class="mt-3">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="me-2">图例:</span>
                                                <span class="me-3"><i class="fas fa-circle text-primary me-1"></i> 正常数据</span>
                                                <span class="me-3"><i class="fas fa-circle text-danger me-1"></i> 异常数据点</span>
                                                <span><i class="fas fa-square text-secondary me-1" style="opacity: 0.3;"></i> 阈值范围</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>异常数据详情</span>
                                        <span class="badge bg-danger">检测到7个异常</span>
                                    </div>
                                    <div class="card-body">
                                        <table class="custom-table">
                                            <thead>
                                                <tr>
                                                    <th>时间</th>
                                                    <th>VOC值</th>
                                                    <th>预期范围</th>
                                                    <th>偏差程度</th>
                                                    <th>异常类型</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>2023-10-14 22:00</td>
                                                    <td>1.92 ppm</td>
                                                    <td>0.12 - 0.65 ppm</td>
                                                    <td>+195%</td>
                                                    <td><span class="badge bg-danger">极端值</span></td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-14 23:00</td>
                                                    <td>1.73 ppm</td>
                                                    <td>0.10 - 0.62 ppm</td>
                                                    <td>+179%</td>
                                                    <td><span class="badge bg-danger">极端值</span></td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-15 00:00</td>
                                                    <td>1.45 ppm</td>
                                                    <td>0.09 - 0.58 ppm</td>
                                                    <td>+150%</td>
                                                    <td><span class="badge bg-danger">极端值</span></td>
                                                </tr>
                                                <tr>
                                                    <td>2023-10-15 01:00</td>
                                                    <td>0.98 ppm</td>
                                                    <td>0.08 - 0.55 ppm</td>
                                                    <td>+78%</td>
                                                    <td><span class="badge bg-warning">轻微异常</span></td>
                                                </tr>
                                                <tr>
                                                    <td>2023-09-23 14:00</td>
                                                    <td>0.87 ppm</td>
                                                    <td>0.15 - 0.70 ppm</td>
                                                    <td>+24%</td>
                                                    <td><span class="badge bg-warning">轻微异常</span></td>
                                                </tr>
                                                <tr>
                                                    <td>2023-09-23 15:00</td>
                                                    <td>0.82 ppm</td>
                                                    <td>0.15 - 0.72 ppm</td>
                                                    <td>+14%</td>
                                                    <td><span class="badge bg-warning">轻微异常</span></td>
                                                </tr>
                                                <tr>
                                                    <td>2023-09-05 03:00</td>
                                                    <td>0.03 ppm</td>
                                                    <td>0.08 - 0.52 ppm</td>
                                                    <td>-63%</td>
                                                    <td><span class="badge bg-info">低值异常</span></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="custom-card mb-4">
                                    <div class="card-header">
                                        <span>异常分析</span>
                                    </div>
                                    <div class="card-body">
                                        <div class="alert alert-danger mb-3" role="alert">
                                            <h5 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>严重异常警报</h5>
                                            <p>系统检测到VOC浓度在10月14日至15日出现显著异常峰值，最高达到1.92 ppm，超出预期范围195%。</p>
                                        </div>
                                        
                                        <div class="card mb-3">
                                            <div class="card-header bg-light">
                                                <h6 class="mb-0">异常特征分析</h6>
                                            </div>
                                            <div class="card-body">
                                                <ul class="mb-0">
                                                    <li>异常持续时间: 约4小时</li>
                                                    <li>异常模式: 峰值型，快速上升后逐渐下降</li>
                                                    <li>波及范围: 仅限钱塘江站VOC传感器</li>
                                                    <li>相关参数变化: 温度、湿度无明显异常</li>
                                                </ul>
                                            </div>
                                        </div>
                                        
                                        <div class="card mb-3">
                                            <div class="card-header bg-light">
                                                <h6 class="mb-0">可能原因分析</h6>
                                            </div>
                                            <div class="card-body">
                                                <ol class="mb-0">
                                                    <li>传感器临时故障或干扰（可能性：中）</li>
                                                    <li>附近工业活动排放（可能性：高）</li>
                                                    <li>特殊气象条件导致污染物聚集（可能性：中）</li>
                                                    <li>校准或维护操作不当（可能性：低）</li>
                                                </ol>
                                            </div>
                                        </div>
                                        
                                        <div class="card">
                                            <div class="card-header bg-light">
                                                <h6 class="mb-0">建议措施</h6>
                                            </div>
                                            <div class="card-body">
                                                <ol class="mb-0">
                                                    <li>检查VOC传感器设备状态</li>
                                                    <li>对比相邻站点数据验证异常</li>
                                                    <li>查询10月14日周边工业活动记录</li>
                                                    <li>安排技术人员现场检查传感器</li>
                                                    <li>增加此区域监测频率</li>
                                                </ol>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="custom-card">
                                    <div class="card-header">
                                        <span>历史异常对比</span>
                                    </div>
                                    <div class="card-body">
                                        <div id="anomalyHistoryChart" class="chart-container" style="height: 300px;"></div>
                                        <div class="mt-3 text-center">
                                            <p>当前异常与历史同类异常对比分析表明，此次VOC浓度峰值强度为近6个月来最高，持续时间相对较短。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            container.appendChild(frame);
        }
        
        // 初始化所有图表
        function initializeCharts() {
            // 仪表盘页面图表
            if (document.getElementById('trendChart')) {
                const trendChart = echarts.init(document.getElementById('trendChart'));
                trendChart.setOption({
                    title: { text: '' },
                    tooltip: { trigger: 'axis' },
                    legend: {
                        data: ['PM2.5', 'PM10', '温度', '湿度'],
                        right: 10
                    },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['10/09', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15']
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '浓度 (μg/m³)',
                            position: 'left'
                        },
                        {
                            type: 'value',
                            name: '温度 (°C) / 湿度 (%)',
                            position: 'right'
                        }
                    ],
                    series: [
                        {
                            name: 'PM2.5',
                            type: 'line',
                            data: [32, 28, 35, 42, 38, 36, 33],
                            yAxisIndex: 0,
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#1890ff' }
                        },
                        {
                            name: 'PM10',
                            type: 'line',
                            data: [65, 58, 72, 80, 75, 70, 62],
                            yAxisIndex: 0,
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#faad14' }
                        },
                        {
                            name: '温度',
                            type: 'line',
                            data: [22, 23, 24, 25, 24, 23, 22],
                            yAxisIndex: 1,
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#f5222d' }
                        },
                        {
                            name: '湿度',
                            type: 'line',
                            data: [65, 60, 55, 50, 55, 65, 70],
                            yAxisIndex: 1,
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#52c41a' }
                        }
                    ]
                });
            }
            
            if (document.getElementById('dataDistributionChart')) {
                const dataDistributionChart = echarts.init(document.getElementById('dataDistributionChart'));
                dataDistributionChart.setOption({
                    title: { text: '' },
                    tooltip: { trigger: 'item' },
                    legend: {
                        orient: 'horizontal',
                        bottom: 'bottom'
                    },
                    series: [
                        {
                            name: '监测数据类型',
                            type: 'pie',
                            radius: '70%',
                            center: ['50%', '45%'],
                            data: [
                                { value: 1248, name: '气体' },
                                { value: 1532, name: '颗粒物' },
                                { value: 856, name: '气象参数' },
                                { value: 725, name: '水质' }
                            ],
                            label: {
                                formatter: '{b}: {c} ({d}%)'
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            }
            
            if (document.getElementById('sensorStatusChart')) {
                const sensorStatusChart = echarts.init(document.getElementById('sensorStatusChart'));
                sensorStatusChart.setOption({
                    color: ['#52c41a', '#f5222d', '#faad14'],
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'horizontal',
                        bottom: 'bottom',
                        data: ['在线', '离线', '故障']
                    },
                    series: [
                        {
                            name: '传感器状态',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 114, name: '在线' },
                                { value: 8, name: '离线' },
                                { value: 4, name: '故障' }
                            ]
                        }
                    ]
                });
            }
            
            // 原始数据页面图表
            if (document.getElementById('rawDataChart')) {
                const rawDataChart = echarts.init(document.getElementById('rawDataChart'));
                rawDataChart.setOption({
                    title: { text: '' },
                    tooltip: { trigger: 'axis' },
                    legend: { data: ['温度 (°C)'] },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['10/15 07:00', '10/15 07:15', '10/15 07:30', '10/15 07:45', '10/15 08:00', '10/15 08:15', '10/15 08:30', '10/15 08:45', '10/15 09:00', '10/15 09:15', '10/15 09:30', '10/15 09:45', '10/15 10:00']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: { formatter: '{value}°C' }
                    },
                    series: [
                        {
                            name: '温度 (°C)',
                            type: 'line',
                            data: [20.7, 20.9, 21.0, 21.2, 21.4, 21.6, 21.8, 22.2, 22.5, 22.7, 22.9, 23.2, 23.5],
                            smooth: true,
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                });
            }
            
            // 统计数据页面图表
            if (document.getElementById('boxplotChart')) {
                const boxplotChart = echarts.init(document.getElementById('boxplotChart'));
                const data = [
                    [17.8, 19.3, 21.6, 24.5, 25.8],
                    [18.3, 19.5, 21.9, 24.8, 26.2],
                    [17.8, 18.7, 21.4, 24.1, 25.5],
                    [18.5, 19.8, 22.1, 24.9, 26.3],
                    [19.1, 20.2, 22.8, 25.4, 26.8],
                    [19.5, 20.9, 23.2, 25.8, 27.1],
                    [19.7, 21.2, 23.5, 26.1, 27.5]
                ];
                
                boxplotChart.setOption({
                    title: { text: '' },
                    tooltip: {
                        trigger: 'item',
                        formatter: function(params) {
                            return `
                            <div>日期：${params.name}</div>
                            <div>最大值：${params.data[4]}°C</div>
                            <div>上四分位数：${params.data[3]}°C</div>
                            <div>中位数：${params.data[2]}°C</div>
                            <div>下四分位数：${params.data[1]}°C</div>
                            <div>最小值：${params.data[0]}°C</div>
                            `;
                        }
                    },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    xAxis: {
                        type: 'category',
                        data: ['10/09', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15']
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: { formatter: '{value}°C' }
                    },
                    series: [
                        {
                            name: '温度分布',
                            type: 'boxplot',
                            data: data,
                            itemStyle: {
                                color: '#1890ff',
                                borderColor: '#1890ff'
                            },
                            tooltip: { formatter: params => params.formatter }
                        }
                    ]
                });
            }
            
            // 相关性分析页面图表
            if (document.getElementById('correlationHeatmap')) {
                const correlationHeatmap = echarts.init(document.getElementById('correlationHeatmap'));
                
                const data = [
                    [0, 0, 1.0],
                    [0, 1, -0.72],
                    [0, 2, -0.34],
                    [0, 3, 0.19],
                    [0, 4, 0.21],
                    [1, 0, -0.72],
                    [1, 1, 1.0],
                    [1, 2, 0.17],
                    [1, 3, 0.52],
                    [1, 4, 0.48],
                    [2, 0, -0.34],
                    [2, 1, 0.17],
                    [2, 2, 1.0],
                    [2, 3, -0.23],
                    [2, 4, -0.28],
                    [3, 0, 0.19],
                    [3, 1, 0.52],
                    [3, 2, -0.23],
                    [3, 3, 1.0],
                    [3, 4, 0.94],
                    [4, 0, 0.21],
                    [4, 1, 0.48],
                    [4, 2, -0.28],
                    [4, 3, 0.94],
                    [4, 4, 1.0]
                ];
                
                correlationHeatmap.setOption({
                    tooltip: {
                        position: 'top',
                        formatter: function(params) {
                            return `${params.marker} ${params.data[2].toFixed(2)}`;
                        }
                    },
                    grid: {
                        top: '60',
                        left: '8%',
                        right: '10%',
                        bottom: '10%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['温度', '湿度', '气压', 'PM2.5', 'PM10'],
                        axisLabel: {
                            interval: 0,
                            rotate: 30
                        }
                    },
                    yAxis: {
                        type: 'category',
                        data: ['温度', '湿度', '气压', 'PM2.5', 'PM10']
                    },
                    visualMap: {
                        min: -1,
                        max: 1,
                        calculable: true,
                        orient: 'horizontal',
                        left: 'center',
                        bottom: '15',
                        inRange: {
                            color: ['#d50000', '#ffffff', '#1b5e20']
                        }
                    },
                    series: [{
                        name: '相关系数',
                        type: 'heatmap',
                        data: data,
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.data[2].toFixed(2);
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                });
            }
            
            // 趋势对比分析页面图表
            if (document.getElementById('trendComparisonChart')) {
                const trendComparisonChart = echarts.init(document.getElementById('trendComparisonChart'));
                trendComparisonChart.setOption({
                    title: { text: '' },
                    tooltip: { trigger: 'axis' },
                    legend: { data: ['西湖监测站', '钱塘江站'] },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['9/1', '9/5', '9/10', '9/15', '9/20', '9/25', '9/30', '10/5', '10/10', '10/15']
                    },
                    yAxis: {
                        type: 'value',
                        name: 'PM2.5 (μg/m³)',
                        axisLabel: { formatter: '{value}' }
                    },
                    series: [
                        {
                            name: '西湖监测站',
                            type: 'line',
                            data: [30, 32, 28, 35, 42, 38, 36, 33, 35, 33],
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#1890ff' }
                        },
                        {
                            name: '钱塘江站',
                            type: 'line',
                            data: [35, 38, 32, 42, 48, 45, 43, 40, 44, 40],
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#f5222d' }
                        }
                    ]
                });
            }
            
            // 预测分析页面图表
            if (document.getElementById('forecastChart')) {
                const forecastChart = echarts.init(document.getElementById('forecastChart'));
                forecastChart.setOption({
                    title: { text: '' },
                    tooltip: { trigger: 'axis' },
                    legend: { data: ['历史数据', '预测值'] },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['10/9', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20', '10/21', '10/22']
                    },
                    yAxis: {
                        type: 'value',
                        name: 'PM2.5 (μg/m³)',
                        axisLabel: { formatter: '{value}' }
                    },
                    series: [
                        {
                            name: '历史数据',
                            type: 'line',
                            data: [30, 32, 28, 35, 30, 28, 32, null, null, null, null, null, null, null],
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#1890ff' },
                            symbolSize: 8
                        },
                        {
                            name: '预测值',
                            type: 'line',
                            data: [null, null, null, null, null, null, null, 32.5, 34.8, 37.6, 35.2, 33.8, 38.5, 42.3],
                            smooth: true,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#f5222d' },
                            symbolSize: 8
                        },
                        {
                            name: '95%置信区间',
                            type: 'line',
                            data: [null, null, null, null, null, null, null, 28.7, 30.2, 32.1, 29.5, 27.6, 31.2, 34.1],
                            lineStyle: {
                                width: 0
                            },
                            stack: 'confidence',
                            symbol: 'none'
                        },
                        {
                            name: '95%置信区间',
                            type: 'line',
                            data: [null, null, null, null, null, null, null, 36.3, 39.4, 43.1, 40.9, 40.0, 45.8, 50.5],
                            lineStyle: {
                                width: 0
                            },
                            areaStyle: {
                                color: '#1890ff',
                                opacity: 0.2
                            },
                            stack: 'confidence',
                            symbol: 'none'
                        }
                    ]
                });
            }
            
            // 异常检测分析页面图表
            if (document.getElementById('anomalyChart')) {
                const anomalyChart = echarts.init(document.getElementById('anomalyChart'));
                
                // 生成数据
                const normalData = [];
                const anomalyData = [];
                const thresholdUpper = [];
                const thresholdLower = [];
                
                for (let i = 0; i < 100; i++) {
                    const date = new Date(2023, 8, 1);
                    date.setHours(date.getHours() + i * 12);
                    const dateStr = date.toLocaleDateString() + ' ' + date.getHours() + ':00';
                    
                    // 正常数据在0.1-0.6之间波动
                    let value = 0.3 + Math.random() * 0.3;
                    
                    // 设置特定点为异常
                    if (i === 88 || i === 89 || i === 90 || i === 91) {
                        anomalyData.push([dateStr, i === 88 ? 1.92 : (i === 89 ? 1.73 : (i === 90 ? 1.45 : 0.98))]);
                        normalData.push([dateStr, null]);
                    } else if (i === 46 || i === 47) {
                        anomalyData.push([dateStr, i === 46 ? 0.87 : 0.82]);
                        normalData.push([dateStr, null]);
                    } else if (i === 10) {
                        anomalyData.push([dateStr, 0.03]);
                        normalData.push([dateStr, null]);
                    } else {
                        normalData.push([dateStr, value]);
                        anomalyData.push([dateStr, null]);
                    }
                    
                    thresholdUpper.push([dateStr, 0.65]);
                    thresholdLower.push([dateStr, 0.10]);
                }
                
                anomalyChart.setOption({
                    title: { text: '' },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(params) {
                            let result = params[0].name + '<br/>';
                            for (let i = 0; i < params.length; i++) {
                                if (params[i].seriesName === '上限' || params[i].seriesName === '下限') continue;
                                if (params[i].value[1] !== null) {
                                    result += params[i].marker + params[i].seriesName + ': ' + params[i].value[1] + ' ppm<br/>';
                                }
                            }
                            return result;
                        }
                    },
                    legend: {
                        data: ['正常数据', '异常数据', '阈值上限', '阈值下限'],
                        selected: {
                            '阈值上限': true,
                            '阈值下限': true
                        }
                    },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false
                    },
                    yAxis: {
                        type: 'value',
                        name: 'VOC (ppm)',
                        axisLabel: { formatter: '{value}' }
                    },
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 70,
                            end: 100
                        },
                        {
                            start: 70,
                            end: 100
                        }
                    ],
                    series: [
                        {
                            name: '正常数据',
                            type: 'line',
                            data: normalData,
                            smooth: true,
                            lineStyle: { width: 2 },
                            itemStyle: { color: '#1890ff' },
                            symbolSize: 6
                        },
                        {
                            name: '异常数据',
                            type: 'scatter',
                            data: anomalyData,
                            symbolSize: 10,
                            itemStyle: { color: '#f5222d' }
                        },
                        {
                            name: '阈值上限',
                            type: 'line',
                            data: thresholdUpper,
                            lineStyle: { 
                                width: 2,
                                type: 'dashed',
                                color: '#faad14'
                            },
                            symbol: 'none'
                        },
                        {
                            name: '阈值下限',
                            type: 'line',
                            data: thresholdLower,
                            lineStyle: { 
                                width: 2,
                                type: 'dashed',
                                color: '#faad14'
                            },
                            symbol: 'none',
                            areaStyle: {
                                color: '#f0f2f5',
                                opacity: 0.4,
                                origin: 'start'
                            }
                        }
                    ]
                });
            }
            
            // 数据标定页面图表
            if (document.getElementById('calibrationChart')) {
                const calibrationChart = echarts.init(document.getElementById('calibrationChart'));
                
                // 生成散点数据
                const scatterData = [];
                for (let i = 0; i < 100; i++) {
                    const x = Math.random() * 100;
                    // y = 1.23x - 2.56 + 随机噪声
                    const y = 1.23 * x - 2.56 + (Math.random() * 10 - 5);
                    scatterData.push([x, y]);
                }
                
                // 生成拟合线数据
                const lineData = [];
                for (let x = 0; x <= 100; x += 5) {
                    const y = 1.23 * x - 2.56;
                    lineData.push([x, y]);
                }
                
                calibrationChart.setOption({
                    title: { text: '' },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(params) {
                            return '(' + params[0].value[0].toFixed(2) + ', ' + params[0].value[1].toFixed(2) + ')';
                        }
                    },
                    legend: {
                        data: ['传感器读数 vs 标准设备', '标定拟合曲线']
                    },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    xAxis: {
                        type: 'value',
                        name: '低成本传感器读数 (μg/m³)',
                        axisLabel: { formatter: '{value}' }
                    },
                    yAxis: {
                        type: 'value',
                        name: '标准参考设备读数 (μg/m³)',
                        axisLabel: { formatter: '{value}' }
                    },
                    series: [
                        {
                            name: '传感器读数 vs 标准设备',
                            type: 'scatter',
                            data: scatterData,
                            symbolSize: 8,
                            itemStyle: { color: '#1890ff' }
                        },
                        {
                            name: '标定拟合曲线',
                            type: 'line',
                            data: lineData,
                            smooth: false,
                            lineStyle: { width: 3 },
                            itemStyle: { color: '#f5222d' },
                            symbol: 'none'
                        }
                    ]
                });
            }
        }
    </script>
</body>
</html> 